<template>
  <ul class="gameList">
      <li v-for="(item,index) in gameListArr" :key="index">
      <img :src="item.img" alt="">
      <div class="txt">
        <div class="name">{{item.name}}</div>
        <div class="cname"><span style="color:#EF8F2C">{{item.nnt}}万人 在玩</span> <span style="color:#90D014">{{item.mb}}MB</span></div>
        <div class="hot">{{item.hot}}</div>
      </div>
      <div class="btn">获取</div>
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      gameListArr: [
        {
          img: require("../../../assets/img/003.png"),
          name: "绝地求生-刺激战场",
          nnt: "1.2",
          mb: "32.5",
          hot: "热门一个游戏，进来组队玩一把......"
        },
        {
          img: require("../../../assets/img/003.png"),
          name: "绝地求生-刺激战场",
          nnt: "1.2",
          mb: "32.5",
          hot: "热门一个游戏，进来组队玩一把......"
        },
        {
          img: require("../../../assets/img/003.png"),
          name: "绝地求生-刺激战场",
          nnt: "1.2",
          mb: "32.5",
          hot: "热门一个游戏，进来组队玩一把......"
        },
        {
          img: require("../../../assets/img/003.png"),
          name: "绝地求生-刺激战场",
          nnt: "1.2",
          mb: "32.5",
          hot: "热门一个游戏，进来组队玩一把......"
        },
        {
          img: require("../../../assets/img/003.png"),
          name: "绝地求生-刺激战场",
          nnt: "1.2",
          mb: "32.5",
          hot: "热门一个游戏，进来组队玩一把......"
        }
      ]
    };
  }
};
</script>
<style lang="stylus" scoped>
.gameList {
  font-family: 'PingFang-SC-Medium';
  width: 3.55rem;
  // height: calc(100% - 1.68rem);
  max-height: calc(100% - 1.68rem);
  margin: 0 auto;
  border-radius: 0.08rem;
  position: relative;
  top: -0.2rem;
  padding: 0.05rem;
  box-sizing: border-box;
  overflow: scroll;
  background: #fff;

  li {
    display: flex;
    margin-bottom: 5px;

    img {
      width: 0.65rem;
      height: 0.65rem;
      display: block;
      flex: 0 1 0.65rem;
    }

    .txt {
      flex-grow: 1;
      margin: 0 5px;

      .name {
        font-size: 14px;
        margin: 8px 0;
      }

      .cname {
        font-size: 11px;
      }

      .hot {
        font-size: 11px;
        color: #444;
        margin: 8px 0;
      }
    }

    .btn {
      flex: 0 1 75px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      background-color: #E8E8E8;
      margin-top: 0.2rem;
      border-radius: 8px;
      color: #1089FF;
    }
  }
}
</style>

